<template>
    <h1>首页 aaaaaaaaaaaa</h1>
    <div style="width: 400px;margin:auto">
        <a-form-item label="邮箱地址">
            <a-input v-model:value="username"/>
        </a-form-item>
        <a-form-item label="密码">
            <a-input v-model:value="password"/>
        </a-form-item>
        <a-form-item label="验证码">
            <a-input v-model:value="code"/>
            <a-button @click="sendCode" :loading="sendLoading">发送验证码</a-button>
        </a-form-item>
        <a-button @click="create">注册</a-button>
    </div>


</template>

<script>
import {message} from 'ant-design-vue'
import axios from 'axios'

export default {
    name: "PageA",
    data() {
        return {
            username: 'yaclty@qq.com',
            password: '123123',
            code: '983584',
            sendLoading: false,
            saveLoading: false
        }
    },
    methods: {
        sendCode() {
            if (!this.username) {
                message.info("邮箱地址不能为空")
            } else {
                this.sendLoading = true
                fetch('http://localhost:9001/user/send-code?email=' + this.username)
                    .then(res => res.json())
                    .then(result => {//获取到结果
                        if (result.code == 0) {
                            message.info("发送验证码成功", 5)
                        } else {
                            message.error(result.message, 5)
                        }
                    })
                    .catch(e => message.error(e.message, 5))
                    .finally(() => this.sendLoading = false)
            }
        },
        create() {
            this.saveLoading = true
            axios.post('http://localhost:9001/user/create-with-code', {
                username: this.username,
                password: this.password,
                code: this.code
            })
                .then(function (response) {
                    const result = response.data;
                    if (result.code == 0) {
                        message.info("注册成功", 5)
                    } else {
                        message.error("注册失败:" + result.message, 5)
                    }
                })
                .catch(function (e) {
                    message.error(e.message, 5)
                })
                .finally(() => this.saveLoading = false)
        }
    }
}
</script>

<style scoped>

</style>